<template>
  <div class="item">
    <p class="itemTitle">{{source.LBL}}</p>
    <p class="itemDesc">{{source.DESC}}</p>
    <div class="itemDefault">
      <el-radio-group v-model="radioSelected">
        <el-radio v-for="(item,index) in source.OPTIONS " :key="index" :label="index">{{item.VAL}}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
export default {
  name: "viewRadio",
  props: {
    source: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    radioSelected: {
      get() {
        if (this.source.OPTIONS) {
          let opts = this.source.OPTIONS;
          for (let i = 0; i < opts.length; i++) {
            if (opts[i].CHKED === "1") {
              return i;
            }
          }
        }
      },
      set(val) {
        let opts = this.source.OPTIONS;
        for (let i = 0; i < opts.length; i++) {
          if (val === i) {
            opts[i].CHKED = "1";
          } else {
            opts[i].CHKED = "0";
          }
        }
      }
    }
  },
  methods: {
    async submit() {
      let opts = this.source.OPTIONS;
      let radioSelected ;
      for (let i = 0; i < opts.length; i++) {
        if (opts[i].CHKED === "1") {
          radioSelected =  opts[i].VAL;
        }
      }
      return Promise.resolve({ [this.source._id]: radioSelected });
    }
  }
};
</script>
<style lang="scss" scoped src="./comView.scss"></style>